<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '店铺详情',
  },
}
</route>

<script lang="ts" setup>
import type { ScrollViewOnScrollEvent } from '@uni-helper/uni-types/index'
import { debounce } from 'lodash'
import { ref } from 'vue'
// 定义 detail 并初始化
const detail = ref<{ id: string } | null>(null)
// 控制导航条显示状态
const showNav = ref(false)
// 模拟一个异步获取数据的函数
async function fetchDetail(query: any) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 这里可以根据实际情况从 API 获取数据
      resolve({ id: query.id || '默认 ID' })
    }, 1000) // 模拟 1 秒的延迟
  })
}

// 使用 async/await 处理异步操作
onLoad(async (query) => {
  console.log('query:', query)
  try {
    const result = await fetchDetail(query)
    detail.value = result as { id: string }
  }
  catch (error) {
    console.error('获取商品详情失败:', error)
  }
})
// 处理滚动事件
const scrollTop = ref(0)

function back() {
  uni.navigateBack()
}

const handleScroll = debounce((e: ScrollViewOnScrollEvent) => {
  scrollTop.value = e.detail.scrollTop
  // console.log(e.detail.scrollTop)
}, 30)

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
const systemInfo = uni.getWindowInfo()
const top = systemInfo.safeArea?.top ?? null
// #endif

const backImg = 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png'

const info = {
  title: '宋风雅韵',
  likesNum: 1,
  goodsImg: 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png',
  comment: [

  ],
}

// 替换为实际的电话号码
const phoneNumber = ref('12345678901')

// 替换为实际的位置信息
const location = ref({
  latitude: 30.835049, // 纬度，请替换为实际值
  longitude: 120.78460, // 经度，请替换为实际值
  name: '油车港镇', // 位置名称
  address: '浙江省嘉兴市秀洲区', // 详细地址
})

// 拨打电话函数
function makePhoneCall() {
  // 检查平台是否支持打电话功能
  if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
    uni.makePhoneCall({
      phoneNumber: phoneNumber.value,
      success: () => {
        console.log('电话拨打成功')
      },
      fail: (err) => {
        console.error('电话拨打失败', err)
        uni.showToast({
          title: '无法拨打该号码',
          icon: 'none',
        })
      },
    })
  }
  else {
    uni.showToast({
      title: '当前平台不支持此功能',
      icon: 'none',
    })
  }
};

// 导航函数
function navigate() {
  // 检查平台是否支持打开地图
  if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
    // 使用微信小程序的 openLocation 接口
    uni.openLocation({
      latitude: location.value.latitude,
      longitude: location.value.longitude,
      name: location.value.name,
      address: location.value.address,
      success: () => {
        console.log('导航成功')
      },
      fail: (err) => {
        console.error('导航失败', err)
        uni.showToast({
          title: '无法打开地图应用',
          icon: 'none',
        })
      },
    })
  }
  else {
    uni.showToast({
      title: '当前平台不支持此功能',
      icon: 'none',
    })
  }
};

// 分享函数
function onShare() {
  // #ifdef MP-WEIXIN
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    title: info.title,
    path: `/pages/news/newsDetail?id=${detail.value?.id}`, // 带上当前页面的ID参数
    imageUrl: info.goodsImg,
    success: () => {
      console.log('分享成功')
    },
    fail: (err) => {
      console.error('分享失败', err)
    },
  })
  // #endif
}

// 微信小程序分享钩子
function onShareAppMessage() {
  return {
    title: info.title,
    path: `/pages/news/newsDetail?id=${detail.value?.id}`, // 带上当前页面的ID参数
    imageUrl: info.goodsImg,
    success: (res) => {
      console.log('分享成功', res)
    },
    fail: (err) => {
      console.error('分享失败', err)
    },
  }
}
</script>

<!-- 规格选择 -->

<template>
  <!-- 导航栏 -->
  <div
    class="fixed left-0 right-0 z-20 bg-white transition-all duration-300" :class="{
      'shadow-md translate-y-0': scrollTop > 50 + top,
      'shadow-none -translate-y-full': scrollTop <= 50 + top,
    }" :style="{
      top: scrollTop > 50 + top ? 0 : `${-50}px`,
      paddingTop: `${top}px`,
    }"
  >
    <div class="h-11 flex items-center bg-white px-4">
      <wd-icon name="thin-arrow-left" size="22px" @click="back" />
      <h1 class="flex-1 truncate px-6 text-lg text-gray-800 font-medium">
        {{ detail?.id }}
      </h1>
    </div>
  </div>

  <scroll-view class="h-300 bg-[#f4f4f4]" scroll-y @scroll="handleScroll">
    <!-- 内容区域，确保内容足够长以触发滚动 -->
    <!-- 背景图 -->
    <image class="h-60 w-100" :src="backImg" mode="aspectFill" />
    <!-- 头部区域 -->
    <view class="relative z-5 mt-[-65rpx] rounded-tl-2xl rounded-tr-2xl bg-white pb-5 pt-4">
      <view class="items-left flex flex-col px-4">
        <!-- 电话定位区域 -->
        <view
          class="mb-6 mt-3 flex items-center justify-between rounded-lg bg-[linear-gradient(to_right,#f8f0eb,#e7d3c3)] from-[#f8f0eb] to-[#e7d3c3] p-4 shadow-md"
        >
          <text class="text-base text-gray-800">
            {{ detail?.id }}
          </text>
          <view class="flex justify-between">
            <view
              class="h-13 w-13 flex flex-col justify-center rounded-[50rpx] bg-white text-center"
              @click="makePhoneCall"
            >
              <wd-icon name="call" size="22px" />
              <text class="text-3 text-gray-700">
                电话
              </text>
            </view>
            <view
              class="ml-2 h-13 w-13 flex flex-col justify-center rounded-[50rpx] bg-white text-center"
              @click="navigate"
            >
              <wd-icon name="location" size="22px" />
              <text class="text-3 text-gray-700">
                导航
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 店铺简介 -->
    <view class="relative z-5 mt-5 bg-white pb-3 pt-4">
      <view class="flex flex-col px-4">
        <view class="mb-2 text-lg text-gray-800">
          简介
        </view>
        <!-- <img src="https://m.360buyimg.com/i/jfs/t1/288574/20/16285/358915/6868e810F75fcfe87/36bab8b231f6c874.jpg" alt="详情图"> -->
        <image
          class="mx-auto w-full" mode="widthFix"
          src="https://img.meituan.net/csc/14ec5ce6e71bce5556c325cfb59dfdf62668373.png"
        />
      </view>
    </view>
    <!-- 商品点评 -->
    <view class="relative z-5 mt-5 bg-white pb-4 pt-4">
      <view class="flex flex-col px-4">
        <view class="mb-2 text-lg text-gray-800">
          点评
        </view>
        <!-- 使用缺省组件 -->
        <DefaultPlaceholder v-if="info.comment.length === 0" text="暂无点评~" />
      </view>
    </view>
    <!-- 底部功能区 -->
    <view class="h-18" />
    <view
      class="fixed bottom-0 z-6 box-border h-20 w-100% flex items-center justify-evenly rounded-tl-2xl rounded-tr-2xl bg-white py-3"
      style="box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);"
    >
      <!-- 分享按钮 -->
      <view class="item-center flex justify-center" @click="onShare">
        <wd-icon name="share" size="44rpx" />
        <text class="ml-1">
          分享
        </text>
      </view>
      <!-- 点评按钮 -->
      <view
        class="h-70% w-60% flex items-center justify-center rounded-lg bg-[linear-gradient(to_right,#e0cebd,#bfa189)] from-[#f8f0eb] to-[#e7d3c3] text-white"
      >
        点评
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-bar {
  height: var(--status-bar-height);
  width: 100%;
}
</style>
